var loading = document.querySelector(".loading");
var loadingProcess = loading.getElementsByTagName("p")[0];
var swiperWrapper = document.querySelector(".swiper-wrapper");
var swiperSlide = document.querySelectorAll(".swiper-slide");
var picArr = [
	"img/bg1.png","img/2017_0.png","img/2017_1.png","img/2017_2.png","img/2017_7.png","img/chainLeft.png","img/chainRight.png","img/fence.png","img/first_circle.png","img/gear1.png","img/gear2.png","img/gear3.png","img/gear4.png","img/gear5.png","img/gear6.png","img/gear7.png","img/gear8.png","img/line1.png","img/line10.png","img/line11.png","img/line12.png","img/line13.png","img/line14.png","img/line2.png","img/line3.png","img/line4.png","img/line5.png","img/line6.png","img/line7.png","img/line8.png","img/line9.png","img/M.png","img/next.png","img/paw.png","img/pawLeft.png","img/pawRight.png","img/first_people.png","img/first_people2.png"
	,"img/bg2.png","img/bottomTextLogo.png","img/second_words.png"
	,"img/bg3.png","img/third_condition.png","img/third_dot1.png","img/third_work.png"
	,"img/bg4.png","img/forth_demon.png","img/forth_demon1.png","img/forth_demon2.png","img/forth_demon3.png","img/forth_demon4.png","img/forth_yello.png","img/intro.png"
	,"img/bg5.png","img/cube.png","img/fifth_demon.png","img/fifth_dot.png","img/fifth_dot1.png","img/QRCode.png" 
]
var img =  new Image();
var sum = picArr.length;
var now = 0;

loadImg();
function loadImg(){
	img.src = picArr[now]; 
	function go () {
		now ++ ;
//		console.log(now);
		loadingProcess.innerHTML = parseInt( now/sum *100 ) + "%";
		if(now < picArr.length){
			loadImg()
		}else{
//			console.log("全部加载完成");
			loading.style.display = "none";
			swiperWrapper.style.opacity = "1";
			action();
		}
	}
	img.onerror = go;
	img.onload = go;
}

function action(){
	document.getElementsByTagName("html")[0].style.background = "black"
	var mySwiper = new Swiper('.swiper-container', {
	direction : '',
	initialSlide : 0,
	speed:800,
	followFinger : false,
	touchRatio : 0.1,
	resistanceRatio : 0,
	onSlideChangeStart:function(swiper){
		swiperSlide[swiper.previousIndex].style.zIndex = -9999;
		/*
		 //搭配noSwiping : true使用，为true时，可以在slide上（或其他元素）增加类名'swiper-no-swiping'，使slide触摸无效，目标无法拖动，只能点击箭头切换
		 for (var i = 0; i < swiperSlide.length; i++) {
			swiperSlide[i].classList.add("swiper-no-swiping")
		}
		setTimeout(function(){
			for (var i = 0; i < swiperSlide.length; i++) {
				if(i!=1){
					swiperSlide[i].classList.remove("swiper-no-swiping")
				}
			}
		},1000)
		*/
		
		if(swiper.activeIndex>swiper.previousIndex){
			swiperSlide[swiper.previousIndex].style.transform = "translateY("+ mySwiper.height +"px) scale(0.8)";
			swiperSlide[swiper.previousIndex].style.webkitFilter = "brightness(0.5)";
		}else{
			swiperSlide[swiper.previousIndex].style.transform = "translateY("+ -mySwiper.height +"px) scale(0.8)";
			swiperSlide[swiper.previousIndex].style.webkitFilter = "brightness(0.5)"
		}

		if(swiper.activeIndex === 0){
			
			first();
		}
		if(swiper.activeIndex === 1){

			second();
		}
		if(swiper.activeIndex === 2){

			third();
		}
		if(swiper.activeIndex === 3){

			forth();
		}
		if(swiper.activeIndex === 4){

			fifth();
		}
	},
	onSlideChangeEnd: function(swiper){
	//	swiperSlide[swiper.previousIndex].style.transform = "translateY(0px) translateZ(0px)";
		swiperSlide[swiper.previousIndex].style.transform = "translateY(0px) scale(1)";
		swiperSlide[swiper.previousIndex].style.zIndex = 0;
		swiperSlide[swiper.previousIndex].style.webkitFilter = "brightness(1)"
  },
	nextButton:'.next',
	//noSwiping : true //使该slide无法拖动，希望文字被选中时可以考虑使用
})


//----------------------------------------------------------------------第一屏-------
first ();
function first () {
  console.log('11111')
}
//----------------------------------------------------------------------第二屏-------
second ();
function second () {
  console.log('2222222')
}

//----------------------------------------------------------------------第三屏-------
third ();
function third () {
  console.log('333333333')
}
//----------------------------------------------------------------------第四屏-------
forth ();
function forth () {
  console.log('333333333')
}

//----------------------------------------------------------------------第五屏-------
fifth ();
function fifth () {
  console.log('333333333')
}
}
